<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <!-- 按钮 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showaddDialogVisible">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
       <el-table
      :data="goodsRolesList"
      style="width: 100%"
      border
      row-key="cat_id"
      :tree-props="{children: 'children'}">
      <el-table-column prop="id" label="#" type="index"></el-table-column>
      <el-table-column
        prop="cat_name"
        label="分类名称">
      </el-table-column>
      <el-table-column
        prop="cat_deleted"
        label="是否有效">
        <template slot-scope="data">
          <i :class="data.row.cat_deleted ? 'green el-icon-success' : 'red el-icon-error'"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="cat_level"
        label="排序">
        <template slot-scope="data">
           <el-tag  v-if="data.row.cat_level==0" effect="dark">一级</el-tag>
           <el-tag  type="warning" v-else-if="data.row.cat_level==1" effect="dark">二级</el-tag>
           <el-tag  type="success" v-else effect="dark">三级</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="mg_state"
        label="操作">
        <template slot-scope="data">
        <div class="bt">
          <el-button type="primary" size="mini"  icon="el-icon-edit"  @click="index(data.row.cat_id)">修改</el-button>
        <el-button type="danger"   size="mini"  icon="el-icon-delete"  @click="del(data.row.cat_id)">删除</el-button>
        </div>
        </template>
      </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="addDialogVisible"
      width="50%" @close="closeaddDialogVisible">
      <el-form ref="addCateFormRef" :model="addCateForm" label-width="100px" :rules="addCateRules">
      <el-form-item label="分类名称:" prop="cat_name">
        <el-input v-model="addCateForm.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类:" >
        <el-cascader
        v-model="catId"
        :options="ParentRolesList"
        :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children'}"
        @change="ParentRolesChange" clearable change-on-select ></el-cascader>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateFormUrl">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改分类对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="setDialogVisible"
      width="50%" @close="closesetDialogVisible">
      <el-form ref="setCateFormRef" :model="setRoles" label-width="100px" :rules="addCateRules">
      <el-form-item label="分类名称:" prop="cat_name">
        <el-input v-model="setRoles.cat_name"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setCateFormUrl">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      params: { // 分页效果
        type: 3, // 获取第几层的分类
        pagenum: 1, // 当前处于的页码
        pagesize: 2 // 当前一页显示几条
      },
      total: 0,
      addDialogVisible: false, // 增加分类对话框
      setDialogVisible: false, // 修改分类对话框
      goodsRolesList: [], // 全部商品分类
      addCateForm: { // 添加用户对象信息
        cat_pid: 0,
        cat_name: '', // 分类名称
        cat_level: 0
      },
      addCateRules: { // 分类添加校验规则
        cat_name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      },
      catId: 0, // 保存添加分类sele下拉框
      ParentRolesList: [], // 父级分类
      setRoles: {
        cat_name: ''
      } // 修改商品信息暂存显示
    }
  },
  created () {
    this.getgoodsRolesList()
  },
  methods: {
    async getgoodsRolesList () { // 获取全部商品分类信息
      const { data: res } = await this.$http.get('categories', { params: this.params })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.goodsRolesList = res.data.result
      this.total = res.data.total
      // this.params.pagenum = res.data.pagenum
      // this.params.pagesize = res.data.pagesize
    },
    showaddDialogVisible () { // 展示添加分类对话框
      this.getParentRolesList() // 获取select下拉的数据
      this.addDialogVisible = true
    },
    handleSizeChange (newSize) { // 改变页面展示几条数据下拉框
      this.params.pagesize = newSize
      this.getgoodsRolesList()
    },
    handleCurrentChange (newNum) { // 改变页码
      this.params.pagenum = newNum
      this.getgoodsRolesList()
    },
    async getParentRolesList () { // 获取select下拉数据
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.ParentRolesList = res.data
    },
    ParentRolesChange () { // 添加分类下拉框发生变化
      if (this.catId.length > 0) {
        this.addCateForm.cat_pid = this.catId[this.catId.length - 1] // 永远拿到最近的父级id 数组中第一个为一级id,第二个为二级id,当选中两级时，应达到二级id
        this.cat_level = this.catId.length // `0`表示一级分类；`1`表示二级分类；`2`表示三级分类
      } else {
        this.addCateForm.cat_pid = 0
        this.cat_level = 0
      }
    },
    closeaddDialogVisible () { // 关闭新增对话框，重置表单
      this.$refs.addCateFormRef.resetFields()
      this.catId = ''
    },
    closesetDialogVisible () {
      this.$refs.setCateFormRef.resetFields()
      this.setRoles = {}
    },
    async addCateFormUrl () { // 添加确认按钮
      const { data: res } = await this.$http.post('categories', this.addCateForm)
      if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
      this.$message({ message: res.meta.msg, type: 'success' })
      this.getgoodsRolesList()
      this.addDialogVisible = false
    },
    async del (id) { // 删除
      const data = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(res => res) // 通过catch捕获错误并且返回res
      if (data === 'cancel') return
      const { data: res } = await this.$http.delete('categories/' + id)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message({ message: res.meta.msg, type: 'success' })
      this.getgoodsRolesList()
    },
    async index (id) { // 点击修改选项弹框，展示数据
      this.setDialogVisible = true
      const { data: res } = await this.$http.get('categories/' + id)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.setRoles = res.data
    },
    async setCateFormUrl () { // 点击修改商品确认按钮发送请求
      const { data: res } = await this.$http.put('categories/' + this.setRoles.cat_id, { cat_name: this.setRoles.cat_name })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message({ message: res.meta.msg, type: 'success' })
      this.getgoodsRolesList()
      this.setDialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.green {
  color: #39ce39;
}
.red {
  color: rgba(255, 0, 0, 0.527);
}
.el-cascader {
  width: 100%;
}
</style>
